<template>
	<view>
		<view @click="showDate = true" class="date_new">{{
			newDate == '' ? '选择需要查看信息的时间段' : newDate
		}}</view>
		<view class="tabsStyle"
			><u-tabs
				active-color="#5690FB"
				:list="tabList"
				:current="current"
				:bar-style="barStyle"
				:bar-width="100"
				:is-scroll="false"
				@change="tabChange"
			></u-tabs
		></view>
		<!-- 门诊 -->
		<view v-if="current == 0">
			<view v-if="outpatientList.length > 0">
				<view
					v-for="(item, index) in outpatientList"
					:key="index"
					@click="outpatientClick(item)"
					class="message_box"
				>
					<view style="margin-top: 40rpx">
						<view class="message_name">
							<view
								><view
									style="
										display: inline-block;
										min-width: 100px;
										text-align: right;
									"
									>病人姓名：</view
								><text>{{ item.patientName }}</text></view
							>
							<view
								><view
									style="
										display: inline-block;
										min-width: 100px;
										text-align: right;
									"
									>总费用：</view
								><text>{{ item.totalCosts }}</text></view
							>
							<view
								><view
									style="
										display: inline-block;
										min-width: 100px;
										text-align: right;
									"
									>检查日期：</view
								><text>{{ item.updateDate }}</text></view
							>
						</view>
					</view>
				</view>
			</view>

			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<!-- 住院 -->
		<view v-if="current == 1">
			<view v-if="hospitalized.length > 0">
				<view
					class="message_box"
					v-for="(item, index) in hospitalized"
					:key="index"
					@click="hospitalizedClick(item)"
				>
					<view>
						<view class="message_name">
							<!-- <view
								><view
									style="
										display: inline-block;
										min-width: 100px;
										text-align: right;
									"
									>材料名称：</view
								><text>{{ item.feeClass }}</text></view
							> -->
							<view
								><view
									style="
										display: inline-block;
										min-width: 100px;
										text-align: right;
									"
									>总费用：</view
								><text>{{ item.costs }}</text></view
							>
							<view
								><view
									style="
										display: inline-block;
										min-width: 100px;
										text-align: right;
									"
									>检查日期：</view
								><text>{{ item.updateDate }}</text></view
							>
						</view>
					</view>
					<!-- </view> -->
				</view>
			</view>

			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<view class="safe"></view>
		<u-calendar
			v-model="showDate"
			ref="calendar"
			:start-text="startText"
			:end-text="endText"
			:range-color="rangeColor"
			:range-bg-color="rangeBgColor"
			:active-bg-color="activeBgColor"
			@change="changeTime"
			:mode="mode"
		></u-calendar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {
	outpatientCharges,
	hospitalizationCharge,
	outpatientChargesDetails,
} from '../../http/api'
import { mapState } from 'vuex'

export default {
	data() {
		return {
			// 日期选择
			mode: 'range',
			showDate: false,
			startText: '开始',
			endText: '结束',
			rangeColor: '#2979ff',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#2979ff',
			newDate: '',
			// 门诊
			outpatientList: [],
			hospitalized: [
				// {
				// 	name: '测试',
				// },
			],
			tabList: [{ name: '门诊' }, { name: '住院' }],
			current: 0,
		}
	},
	onLoad() {
		wx.showLoading({
			title: '加载中',
			mask: true,
		})
		this.outpatientChargesData(this.orgCode, this.patientIdentity, '', '', '1')
	},
	computed: {
		...mapState({
			orgCode: state => state.orgCode,
			patientId: state => state.patientId,
			orgCode: state => state.orgCode,
			patientIdentity: state => state.patientIdentity,
		}),
	},
	methods: {
		// 门诊
		outpatientChargesData(
			orgCode,
			patientIdentity,
			queryStartDate,
			queryEndDate,
			outpOrRegist,
		) {
			outpatientCharges({
				orgCode: orgCode,
				// patientId: this.patientId,
				idCard: patientIdentity,
				queryStartDate: queryStartDate,
				queryEndDate: queryEndDate,
				outpOrRegist: outpOrRegist,
			}).then(({ data, head }) => {
				if (head.code == 200) {
					wx.showToast({
						title: '加载成功',
					})
					this.outpatientList = data
				} else {
					this.outpatientList = []
					uni.hideLoading()
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
						// isTab: true,
						duration: 1500,
					})
				}
			})
		},
		// 住院收费
		hospitalizationChargeData(
			orgCode,
			patientIdentity,
			queryStartDate,
			queryEndDate,
		) {
			hospitalizationCharge({
				orgCode: orgCode,
				// patientId: '49df4e02071048cdaa6154f9c491bd7e',
				idCard: patientIdentity,
				queryStartDate: queryStartDate,
				queryEndDate: queryEndDate,
			}).then(({ data, head }) => {
				console.log(head, '123')
				this.hospitalized = []
				if (head.code == 200) {
					console.log(data)
					this.hospitalized = data
					console.log(this.hospitalized, '123')
					// data.map(i => {
					// 	i.inpSettleDetailList.map(a => {
					// 		this.hospitalized.push(a)
					// 	})
					// })
					// wx.showToast({
					// 	title: '加载完成',
					// })
				} else {
					// wx.showToast({
					// 	title: '暂无信息',
					// })
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
						// isTab: true,
						duration: 1500,
					})
				}
			})
		},
		// 住院门诊收费详情
		outpatientChargesDetailsData(serialNo) {
			outpatientChargesDetails({ serialNo: serialNo }).then(
				({ data, head }) => {
					console.log(data)
					if (head.code == 200) {
						this.$router.navigateTo({
							url:
								'/pages/costInventory/particulars?parameter=' +
								JSON.stringify(data),
						})
					}
				},
			)
		},
		tabChange(index) {
			console.log(index)
			this.current = index
			if (index == 0) {
				this.$refs.calendar.startDate = ''
				this.$refs.calendar.today = ''
				this.newDate = ''
				this.hospitalized = []
				this.outpatientChargesData(
					this.orgCode,
					this.patientIdentity,
					'',
					'',
					'1',
				)
			} else {
				this.$refs.calendar.startDate = ''
				this.$refs.calendar.today = ''
				this.newDate = ''
				// wx.showLoading({
				// 	title: '加载中',
				// 	mask: true,
				// })
				this.hospitalizationChargeData(
					this.orgCode,
					this.patientIdentity,
					'',
					'',
				)
				console.log(this.hospitalized, '测试')
			}
		},
		changeTime(e) {
			this.newDate = e.startDate + '-' + e.endDate
			this.outpatientChargesData(
				this.orgCode,
				this.patientIdentity,
				e.startDate,
				e.endDate,
				String(this.current),
			)
		},
		//门诊
		outpatientClick(item) {
			console.log(item)
			this.outpatientChargesDetailsData(item.serialNo)
		},
		// 住院
		hospitalizedClick(item) {
			console.log(item)
			this.$router.navigateTo({
				url: `/pages/costInventory/hospitalMaterials?paramerter=${JSON.stringify(
					item.inpSettleDetailList,
				)}`,
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background: #f3f3f3;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
.date_new {
	margin-top: 40rpx;
	border-width: 1px;
	border-color: #ecf5ff;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #2979ff;
	color: #fff;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.message_box {
	display: flex;
	padding: 20rpx;
	align-items: center;
	background: #fff;
	margin-bottom: 20px;
	.message_name {
		flex: 1;
		font-size: 30rpx;
		view {
			color: rgb(182, 182, 182);
			padding: 4px;
			test {
				color: #000;
				margin-left: 40rpx;
			}
		}
	}
}
</style>